*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, button{
  font-family: 'Helvetica Neue', arial, sans-serif;
}

.controls {
  padding: 2%;
  background: #900;
  color: #eee;
  margin-top:5px;
  width:380px;
  
}
.controls2{
  padding: 2%;
  background: #FC0;
  color: #eee;
  margin-top:5px;
  width:380px;
  position:absolute;
  margin-left:30%;
  margin-top: -74.6%;
	
}
.controls3{
  padding: 2%;
  background: #060;
  color: #eee;
  margin-top:5px;
  width:380px;
  margin-left:68%;
  margin-top: -84.6%;
	
}
label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #023a70;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button.active{
  background: #68b8c4;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.container2{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 3px;
  background: #F0F0F0; 
  margin-top: 2px;
  width:380px;
  
  
  -webkit-backface-visibility: hidden;
}

.container2:after{
  content: '';
  display: inline-block;
  width: 100%;
 	font-size:12px;
}

.container2 .mix,
.container2 .gap{
  display: inline-block;
  width: 49%;
  font-size:12px;
}

.container2 .mix{
  text-align: left;
  background: #CCC;
  margin-bottom: 2%;
  display: inline-block;
  font-size:12px;
  
}

.container2 .mix.category-1{
  border-top: 2px solid limegreen;
}

.container2 .mix.category-2{
  border-top: 2px solid yellow;
}

.container2 .mix.category-3{
 border-top: 2px solid red;
 font-size:12px;
 color:#FFF;
 display:block;
 width:300px;
 alignment-baseline:central;
 	
}
.container2 .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size:12px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container2 .mix:before{
  content: '';
  display: block;
  padding-top: 60%;
  font-size:12px;
}

@media all and (min-width: 420px){
  .container2 .mix,
  .container2 .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container2 .mix,
  .container2 .gap{
    width: 23.5%;
  }
}


/* MAIS CONTEINER */

.container4{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  background: #F0F0F0; 
  margin-top: 2px;
  width:380px;
  position:absolute;
  margin-top:-69.6%;
  margin-left:30%;
  
  -webkit-backface-visibility: hidden;
}

.container4:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container4 .mix,
.container4 .gap{
  display: inline-block;
  width: 49%;
}

.container4 .mix{
  text-align: left;
  background: #CCC;
  margin-bottom: 2%;
  display: inline-block;
  font-size:1px;
  
}

.container4 .mix.category-1{
  border-top: 2px solid limegreen;
}

.container4 .mix.category-2{
  border-top: 2px solid yellow;
   font-size:12px;
   display:block;
    width:300px;
}

.container4 .mix.category-3{
 border-top: 2px solid red;
 
 	
}
.container4 .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size:12px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container4 .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
  
}

@media all and (min-width: 420px){
  .container4 .mix,
  .container4 .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container4 .mix,
  .container4 .gap{
    width: 23.5%;
  }
}

.container5{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  background: #F0F0F0; 
  margin-top: 2px;
  width:380px;
   position:absolute;
  margin-top:0.2%;
  margin-left:60%;
  
  -webkit-backface-visibility: hidden;
}

.container5:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container5 .mix,
.container5 .gap{
  display: inline-block;
  width: 49%;
}

.container5 .mix{
  text-align: left;
  background: #CCC;
  margin-bottom: 2%;
  display: inline-block;
  font-size:1px;
  
}

.container5 .mix.category-1{
  border-top: 2px solid limegreen;
  font-size:12px;
  display:block;
  width:300px;
}

.container5 .mix.category-2{
  border-top: 2px solid yellow;
   
}

.container5 .mix.category-3{
 border-top: 2px solid red;
 
 	
}
.container5 .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size:12px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container5 .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
  
}

@media all and (min-width: 420px){
  .container5 .mix,
  .container5 .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container5 .mix,
  .container5 .gap{
    width: 23.5%;
  }
}




/* CONTINUAÇÃO */

.container3 {
  margin: 50px auto;
  width: 480px;
  text-align: center;
}

.container3 .nav {
  display: inline-block;
  text-align: left;
}

.nav {
  padding: 0px;
  width:690px;
  margin-left:-16%;



}

.nav-list {
  padding: 0 12px;
  height: 34px;
  background: #f4f5f7;
  border-radius: 18px;
  background-image: -webkit-linear-gradient(top, white, #e1e2eb);
  background-image: -moz-linear-gradient(top, white, #e1e2eb);
  background-image: -o-linear-gradient(top, white, #e1e2eb);
  background-image: linear-gradient(to bottom, white, #e1e2eb);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.nav-list > li {
  float: left;
  height: 17px;
  margin: 8px 0;
  font-size:0;
}

.nav-list > li + li {
  border-left: 1px dotted #989ca8;
}

.nav-link {
  float: left;
  position: relative;
  margin-top: -8px;
  padding: 0 14px;
  line-height: 34px;
  font-size: 10px;
  font-weight: bold;
  color: #555;
  text-decoration: none;
  text-shadow: 0 1px white;
}

.nav-link:hover {
  color: #333;
  text-decoration: underline;
}

.nav-counter {
  position: absolute;
  top: -1px;
  right: 1px;
  min-width: 8px;
  height: 20px;
  line-height: 20px;
  margin-top: -11px;
  padding: 0 6px;
  font-weight: normal;
  color: white;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  background: #e23442;
  border: 1px solid #911f28;
  border-radius: 11px;
  background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
  background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
  background-image: -o-linear-gradient(top, #e8616c, #dd202f);
  background-image: linear-gradient(to bottom, #e8616c, #dd202f);
  -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
}

.nav-counter-green {
  background: #75a940;
  border: 1px solid #42582b;
  background-image: -webkit-linear-gradient(top, #8ec15b, #689739);
  background-image: -moz-linear-gradient(top, #8ec15b, #689739);
  background-image: -o-linear-gradient(top, #8ec15b, #689739);
  background-image: linear-gradient(to bottom, #8ec15b, #689739);
}

.nav-counter-blue {
  background: #3b8de2;
  border: 1px solid #215a96;
  background-image: -webkit-linear-gradient(top, #67a7e9, #2580df);
  background-image: -moz-linear-gradient(top, #67a7e9, #2580df);
  background-image: -o-linear-gradient(top, #67a7e9, #2580df);
  background-image: linear-gradient(to bottom, #67a7e9, #2580df);
}


/* ACCORDION */


/*Accordian menu color*/
/******************************************************
MIXINS
******************************************************/
/******************************************************
BODY/HTML
******************************************************/

/******************************************************
WRAPPERS
******************************************************/
.wrapper {
  width: 400px;
  margin: 0 auto;
  padding:0;
}

/******************************************************
PAGE TEXT
******************************************************/
h1 {
  color: #FFF;
  position: relative;
  text-shadow: #000 0px 1px 2px;
  font: 13px Open Sans;
  text-transform: uppercase;
  padding: 10px;
  margin: 0px;
  background-image: -ms-linear-gradient(top, #666 0%,  #666100);
  background-image: -moz-linear-gradient(top,  #666 0%,  #666 100%);
  background-image: -o-linear-gradient(top,  #666 0%,  #666 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,  #666), color-stop(1,  #666));
  background-image: -webkit-linear-gradient(top,  #666 0%,  #666 100%);
  background-image: linear-gradient(to bottom,  #666 0%,  #666 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-color:#900;
}

/******************************************************
ACCORDIAN MENU'S
******************************************************/
.first-menu {
  width: 380px;
  padding: 0px;
  margin: 0px;
  border: 1px solid #000;
  background: #CCC;
  position:absolute;
  margin-left:-30%;
}

.second-menu {
  width: 380px;
  padding: 0px;
  margin: 0px;
  border: 1px solid #000;
  background: #292929;
   margin-left:-390px;
 
	

}

.menu {
  display: none;
  list-style: none;
  padding: 0px;
  color:#FFF;
}
.menu li {
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.menu li:hover {
  background-image: -ms-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: -moz-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: -o-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3D3D3D), color-stop(1, #212121));
  background-image: -webkit-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: linear-gradient(to bottom, #3D3D3D 0%, #212121 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}
.menu li a {
  color: #FFF;
  text-shadow: #000 0px 1px 2px;
  font: 12px Open Sans;
  text-decoration: none;
}
.menu li:first-child {
  border-top: 1px solid #000;
}
.menu li:last-child {
  border-bottom: none;
}

/******************************************************
ACCORDIAN ARROWS
******************************************************/
.arrow {
  top: 18px;
  left: 360px;
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #FFF;
  position: absolute;
  margin-left:-8px;
}

.arrow:hover {
  cursor: pointer;
}

/******************************************************
ACCORDIAN ACTIVE STATE (OPTIONAL)
******************************************************/
/******************************************************
PLACEMENT FOR CODEPEN
******************************************************/
.move {
  margin-top: 50px;
}

.photo-os{
width:250px;
height:100px;
border:dotted 1px;
border-color:#FFF;	
	
}